<template>
  <div class="flex-content set-padding">
    <!-- 头部 -->
    <div class="section-header flex-alignc-justifyb pdl-0 pdr-0">
      <div>工单</div>
      <!-- <div>
        <a-input-search
          @search="onSearch"
          allow-clear
          placeholder="输入标题查询"
        >
          <a-button icon="search" slot="enterButton"></a-button>
        </a-input-search>
      </div> -->
      <a-button @click="$refs.TemplateModal.openModal()" type="primary"
        >提交工单</a-button
      >
    </div>
    <div class="flex-main pd-0">
      <div class="flex-content bgfff h100 pd-20">
        <div class="flex-alignc mb-16">
          <div class="mr-16">共{{ total }}个工单</div>
          <a-select
            style="min-width: 80px"
            class="mr-16"
            size="small"
            v-model="queryParams.taskStatus"
            @change="getTableList"
          >
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">待接受</a-select-option>
            <a-select-option value="2">拒绝接受</a-select-option>
            <a-select-option value="3">执行中</a-select-option>
            <a-select-option value="4">待验证</a-select-option>
            <a-select-option value="5">待评价</a-select-option>
            <a-select-option value="6">已完成</a-select-option>
          </a-select>
          <a-select
            style="min-width: 80px"
            class="mr-16"
            size="small"
            v-model="queryParams.timeoutStatus"
            @change="getTableList"
          >
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">未超时</a-select-option>
            <a-select-option value="1">已超时</a-select-option>
          </a-select>
        </div>
        <div ref="yHeight" class="flex-sub1" style="height: 0">
          <!-- 表格 -->
          <myTable
            :columns="columns"
            :dataSource="tableData"
            :scroll="{ x: 2500, y: yHeight }"
            :total="total"
            @changePagination="getTableList"
          >
            <template slot="titleSlot" slot-scope="slotData">
              <div @click="toDetail(slotData.scope)">
                {{ slotData.scope.title }}
              </div>
            </template>
            <template slot="taskStatusSlot" slot-scope="slotData">
              <div>
                <span v-if="slotData.scope.taskStatus == 1">待接受</span>
                <span v-else-if="slotData.scope.taskStatus == 2">拒绝接受</span>
                <span v-else-if="slotData.scope.taskStatus == 3">执行中</span>
                <span v-else-if="slotData.scope.taskStatus == 4">待验证</span>
                <span v-else-if="slotData.scope.taskStatus == 5">待评价</span>
                <span v-else-if="slotData.scope.taskStatus == 6">已完成</span>
              </div>
            </template>
            <template slot="timeoutStatusSlot" slot-scope="slotData">
              <div>
                <span v-if="slotData.scope.timeoutStatusSlot == 0">未超时</span>
                <span v-else-if="slotData.scope.timeoutStatusSlot == 1"
                  >超时</span
                >
              </div>
            </template>
            <template slot="planHandlerSlot" slot-scope="slotData">
              <div>
                <div>{{ slotData.scope.planHandlerStartTime }}</div>
                <div>{{ slotData.scope.planHandlerEndTime }}</div>
              </div>
            </template>
            <template slot="realityHandlerSlot" slot-scope="slotData">
              <div>
                <div>{{ slotData.scope.realityHandlerStartTime }}</div>
                <div>{{ slotData.scope.realityHandlerEndTime }}</div>
              </div>
            </template>
          </myTable>
        </div>
      </div>
    </div>
    <!-- 模板选择弹窗 -->
    <TemplateModal
      @onSubmit="templateSubmit"
      ref="TemplateModal"
      :id.sync="form.templateId"
      :name.sync="form.templateName"
    ></TemplateModal>

    <!-- 添加工单弹窗 -->
    <a-drawer
      :bodyStyle="{
        padding: '0.3rem 0 0 0',
      }"
      :closable="false"
      :destroyOnClose="true"
      :headerStyle="{
        background: '#f0f1f5',
        padding: '0 0.2rem 0 0.3rem',
      }"
      :visible="visible"
      @close="closeTopDrawer"
      height="100%"
      placement="top"
      wrapClassName="add-power"
    >
      <template #title>
        <div class="head-box">
          <span>{{ form.templateName }}</span>
          <div class="head-btn">
            <a-button @click="closeTopDrawer">取消</a-button>
            <a-button class="save-btn" type="primary" @click="handleSubmit"
              >保存</a-button
            >
          </div>
        </div>
      </template>

      <div class="content-box">
        <div class="flex h100" style="width: 80%; margin: auto">
          <div class="h100 scroll-y flex-sub1 left">
            <a-form-model ref="form" :model="form" :rules="rules">
              <a-form-model-item label="标题" prop="title">
                <a-input v-model="form.title"></a-input>
              </a-form-model-item>
              <a-form-model-item label="优先级" prop="priority">
                <a-select v-model="form.priority">
                  <a-select-option value="1">较低</a-select-option>
                  <a-select-option value="2">普通</a-select-option>
                  <a-select-option value="3">紧急</a-select-option>
                  <a-select-option value="4">非常紧急</a-select-option>
                </a-select>
              </a-form-model-item>

              <a-form-model-item
                label="计划处理时间"
                prop="planHandlerStartTime"
              >
                <a-range-picker
                  class="rang-picker"
                  show-time
                  v-model="timeArr"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                />
              </a-form-model-item>
              <a-form-model-item label="电站">
                <div class="tagBox-wrap">
                  <a-tag
                    v-if="form.stationId"
                    closable
                    @close="handleTagClose(1)"
                  >
                    {{ form.stationName }}
                  </a-tag>
                  <a-button
                    type="link"
                    icon="plus"
                    size="small"
                    @click="handleOpenModal('StationModal')"
                  >
                    电站
                  </a-button>
                </div>
              </a-form-model-item>
              <a-form-model-item label="设备">
                <div class="tagBox-wrap">
                  <a-tag
                    v-if="form.deviceId"
                    closable
                    @close="handleTagClose(2)"
                  >
                    {{ form.deviceName }}
                  </a-tag>
                  <a-button
                    type="link"
                    icon="plus"
                    size="small"
                    @click="handleOpenModal('DeviceModal')"
                  >
                    设备
                  </a-button>
                </div>
              </a-form-model-item>
              <a-form-model-item label="报警">
                <div class="tagBox-wrap">
                  <a-tag
                    v-if="form.alarmId"
                    closable
                    @close="handleTagClose(3)"
                  >
                    {{ form.alarmName }}
                  </a-tag>
                  <a-button
                    type="link"
                    icon="plus"
                    size="small"
                    @click="handleOpenModal('PoliceModal')"
                  >
                    报警
                  </a-button>
                </div>
              </a-form-model-item>
              <a-form-model-item label="描述" prop="taskDesc">
                <a-textarea
                  :auto-size="{ minRows: 3, maxRows: 5 }"
                  placeholder="请描述电站故障"
                  v-model="form.taskDesc"
                />
              </a-form-model-item>
              <a-form-model-item label="图片描述" prop="imgDescribe">
                <a-upload
                  list-type="picture-card"
                  :file-list="form.fileEntities"
                  :before-upload="uploadCheck"
                  :customRequest="ownUpload"
                  @change="handleChange"
                >
                  <div v-if="form.fileEntities.length < 8">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
              </a-form-model-item>
            </a-form-model>
          </div>
          <div class="flow flex-sub1">
            <div>流程</div>
            <ul>
              <li v-for="(item, index) in memberList" :key="index">
                <div class="mb-16">{{ item.type }}</div>
                <div v-if="!item.id" class="tip">
                  请选择{{ item.type }}
                  <a-icon
                    v-if="!item.id"
                    class="add-member"
                    type="plus-circle"
                    style="color: #1890ff; font-size: 22px"
                    @click="handleOpenMemberModal(index, item)"
                  />
                </div>
                <div v-else class="flex">
                  <div>
                    <div class="header">
                      <img
                        :src="
                          item.headImgUrl
                            ? item.headImgUrl
                            : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
                        "
                      />
                      <a-icon
                        class="close"
                        type="close-circle"
                        @click="handleDelMember(index, item)"
                      />
                    </div>
                    <div>{{ item.name }}</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </a-drawer>

    <!-- 详情抽屉 -->
    <a-drawer
      placement="right"
      :closable="false"
      :visible="detailDrawer"
      width="83%"
      wrapClassName="create-power right-power"
      @close="closeDetailDrawer"
      :destroyOnClose="true"
      :headerStyle="{
        background: '#fff',
        padding: '0.2rem 0.25rem 0 0.25rem',
        flexGrow: 0,
      }"
      :bodyStyle="{
        padding: '0.3rem 0 0.2rem 0',
        background: 'fff',
        flexGrow: 1,
        overflowY: 'auto',
      }"
      :drawerStyle="{
        background: '#EEEEEF',
        display: 'flex',
        flexDirection: 'column',
      }"
    >
      <template #title>
        <div class="right-head">
          <div class="flex-alignc-justifyb">
            <div class="number">
              编号:{{ detail.templateId }}
              <!-- · 模板名称缺少字段 -->
            </div>
            <div class="flex-alignc operate">
              <!-- <a-icon type="left-square" title="撤销" />
              <a-icon
                type="right-square"
                title="重新提交"
                @click="
                  form = detail;
                  visible = true;
                "
              /> -->
              <a-icon type="sync" title="刷新" @click="getDetail(detail.id)" />
              <a-icon
                type="close-circle"
                theme="filled"
                style="color: #ff7875"
                title="关闭"
                @click="closeDetailDrawer"
              />
            </div>
          </div>
          <div class="flex-alignc">
            <div class="name">{{ detail.title }}</div>
            <div class="ml-20">
              <a-tag v-if="detail.priority == 1" color="green">较低</a-tag>
              <a-tag v-else-if="detail.priority == 2" color="blue">普通</a-tag>
              <a-tag v-else-if="detail.priority == 3" color="orange"
                >紧急</a-tag
              >
              <a-tag v-else-if="detail.priority == 4" color="red"
                >非常紧急</a-tag
              >
            </div>
          </div>
          <div class="status">
            <div v-if="detail.taskStatus == 1" class="flex-alignc yellow">
              <a-icon class="mr-20" type="clock-circle" />
              <span>待接受</span>
            </div>
            <div v-else-if="detail.taskStatus == 2" class="flex-alignc yellow">
              <a-icon class="mr-20" type="clock-circle" />
              <span>拒绝接受</span>
            </div>
            <div v-else-if="detail.taskStatus == 3" class="flex-alignc blue">
              <a-icon class="mr-20" type="clock-circle" />
              <span>执行中</span>
              <div v-if="detail.timeoutStatus == 1">
                <span>|</span>
                <span class="yellow">已超时</span>
                <span>{{ detail.timeout }}h</span>
              </div>
            </div>
            <div v-else-if="detail.taskStatus == 4" class="flex-alignc yellow">
              <a-icon class="mr-20" type="clock-circle" />
              <span>待验证</span>
            </div>
            <div v-else-if="detail.taskStatus == 5" class="flex-alignc yellow">
              <a-icon class="mr-20" type="clock-circle" />
              <span>待评价</span>
            </div>
            <div v-else-if="detail.taskStatus == 6" class="flex-alignc green">
              <a-icon class="mr-20" type="check-circle" />
              <span>已完成</span>
            </div>
          </div>

          <div>
            <a-row>
              <a-col :span="12">
                计划处理时间: {{ detail.planHandlerStartTime }} ~
                {{ detail.planHandlerEndTime }}
              </a-col>
              <a-col :span="6"> 计划用时: {{ detail.planDateTime }} h </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                实际处理时间:
                <span v-if="detail.realityHandlerStartTime">
                  {{ detail.realityHandlerStartTime }} ~
                  {{ detail.realityHandlerEndTime }}
                </span>
                <span v-else>--</span>
              </a-col>
              <a-col :span="6">
                实际用时:
                <span v-if="detail.realityDateTime"
                  >{{ detail.realityDateTime }} h</span
                >
                <span v-else>--</span>
              </a-col>
              <a-col :span="6">
                偏差:
                <span v-if="detail.deviation">{{ detail.deviation }}%</span>
                <span v-else>--</span>
              </a-col>
            </a-row>
          </div>
        </div>
      </template>
      <div class="content-box flex-content">
        <div class="flex-main">
          <div class="flex h100">
            <div class="flex-sub1 scroll-y bgfff pd-20 mr-20">
              <div
                class="borderb-grey mb-20"
                v-if="detail.taskStatus == 6 && evaluate"
              >
                <div class="detail-form">
                  <div class="label">工单评价</div>
                  <div class="flex-alignc detail-text">
                    <div class="header">
                      <!-- <img :src="detail.verifyIcon?detail.verifyIcon:'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'" /> -->
                      <img
                        :src="
                          getFlowTime(6,'headImgUrl')
                            ? getFlowTime(6,'headImgUrl')
                            : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
                        "
                      />
                    </div>
                    <div>
                      <!-- <div>{{ detail.verifyName }}</div> -->
                      <div>{{ getFlowTime(6,'userName') }}</div>
                      <div v-if="evaluate.overallScore">
                        <a-rate :default-value="Number(evaluate.overallScore)" disabled/>
                        {{ Number(evaluate.overallScore) }}
                      </div>
                      <div>
                        响应:{{ evaluate.responseScore }} 质量:{{
                          evaluate.qualityScore
                        }}
                        效率:{{ evaluate.efficiencyScore }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="borderb-grey mb-20">
                <div class="detail-form">
                  <div class="label">工单处理报告</div>
                  <!-- 执行总显示 -->
                  <div
                    v-if="detail.taskStatus >= 3 && !isReport"
                    class="detail-text c048F pointer"
                    @click="openWorkDrawer"
                  >
                    点击这里填写工单处理报告
                  </div>
                  <!-- 待验证显示 -->
                  <div
                    v-if="detail.taskStatus >= 3 && isReport"
                    class="detail-text c048F pointer"
                    @click="openWorkDrawer"
                  >
                    点击这里查看工单处理报告
                  </div>
                </div>
              </div>
              <div class="borderb-grey mb-20">
                <div class="detail-form">
                  <div class="label">电站</div>
                  <div class="detail-text">
                    {{ detail.stationName ? detail.stationName : "--" }}
                  </div>
                </div>
                <div class="detail-form">
                  <div class="label">设备</div>
                  <div class="detail-text">
                    {{ detail.deviceTitle ? detail.deviceTitle : "--" }}
                  </div>
                </div>
                <div class="detail-form">
                  <div class="label">报警</div>
                  <div class="detail-text">
                    {{ detail.alarmTitle ? detail.alarmTitle : "--" }}
                  </div>
                </div>
              </div>
              <div>
                <div class="detail-form">
                  <div class="label mb-16">描述</div>
                  <div class="detail-text">
                    <a-textarea
                      :auto-size="{ minRows: 3, maxRows: 5 }"
                      disabled
                      v-model="detail.taskDesc"
                    />
                  </div>
                </div>
                <div class="detail-form">
                  <div class="label">图片描述</div>
                  <div class="detail-text">
                    <a-upload
                      list-type="picture-card"
                      :file-list="detail.fileEntities"
                    >
                    </a-upload>
                    <!-- detail.taskDesc -->
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-sub1 scroll-y bgfff pd-20 flow">
              <ul>
                <li>
                  <div class="flow-status-icon">
                    <a-icon class="green" type="check-circle" theme="filled" />
                  </div>
                  <div class="flex-alignc-justifyb mb-16">
                    <div class="flow-title">发起工单</div>
                    <div>{{ detail.createTime }}</div>
                  </div>
                  <div>
                    <div class="header">
                      <!-- <img :src="detail.createUserIcon?detail.createUserIcon:'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'" /> -->
                      <img
                        :src="
                          detail.createUserIcon
                            ? detail.createUserIcon
                            : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
                        "
                      />
                    </div>
                    <div>{{ detail.createName }}</div>
                  </div>
                </li>
                <li>
                  <div class="flow-status-icon">
                    <a-icon v-if="detail.taskStatus == 1" class="warn" type="clock-circle" theme="filled" />
                    <a-icon v-else-if="detail.taskStatus == 2" class="error" type="exclamation-circle" theme="filled" />
                    <a-icon v-else-if="detail.taskStatus == 3" class="green" type="check-circle" theme="filled" />
                    <a-icon v-else type="clock-circle" theme="filled" />
                  </div>
                  <div class="flex-alignc-justifyb mb-16">
                    <div class="flow-title">
                      <span>处理工单</span>
                      <span v-if="detail.taskStatus == 2" class="ml-10 cf8b">(已拒绝)</span>
                    </div>
                    <div v-if="detail.taskStatus == 2">
                      {{ getFlowTime(2,'createTime') }}
                    </div>
                    <div v-else>{{ getFlowTime(1,'createTime') }}</div>
                  </div>
                  <div>
                    <div class="header">
                      <!-- <img :src="detail.handleIcon?detail.handleIcon:'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'" /> -->
                      <img
                        :src="
                          getFlowTime(3,'headImgUrl')
                            ? getFlowTime(3,'headImgUrl')
                            : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
                        "
                      />
                    </div>
                    <!-- <div>{{ detail.handleName }}</div> -->
                    <div>{{ getFlowTime(3,'userName') }}</div>
                  </div>
                </li>
                <li>
                  <div class="flow-status-icon">
                    <a-icon v-if="getFlowStatus(4)" class="green" type="check-circle" theme="filled" />
                    <a-icon v-else-if="getFlowStatus(5)" class="error" type="exclamation-circle" theme="filled" />
                    <a-icon v-else type="clock-circle" theme="filled" />
                  </div>
                  <div class="flex-alignc-justifyb mb-16">
                    <div class="flow-title">
                      <span>验证工单</span>
                      <span v-if="detail.taskStatus == 5" class="ml-10 cf8b">(已拒绝)</span>
                    </div>
                    <div v-if="detail.taskStatus == 5">
                      {{ getFlowTime(5,'createTime') }}
                    </div>
                    <div v-else>{{ getFlowTime(4,'createTime') }}</div>
                  </div>
                  <div>
                    <div class="header">
                      <!-- <img :src="detail.createUserIcon?detail.createUserIcon:'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'" /> -->
                      <img
                        :src="
                          getFlowTime(4,'headImgUrl')||getFlowTime(5,'headImgUrl')
                            ? getFlowTime(4,'headImgUrl')||getFlowTime(5,'headImgUrl')
                            : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
                        "
                      />
                    </div>
                    <!-- <div>{{ detail.createName }}</div> -->
                    <div>{{ getFlowTime(4,'userName')||getFlowTime(5,'userName') }}</div>
                  </div>
                </li>
                <li>
                  <div class="flow-status-icon">
                    <a-icon v-if="getFlowStatus(6)" class="green" type="check-circle" theme="filled" />
                    <a-icon v-else type="clock-circle" theme="filled" />
                  </div>
                  <div class="flex-alignc-justifyb mb-16">
                    <div class="flow-title">评价工单</div>
                    <div>{{ getFlowTime(6,'createTime') }}</div>
                  </div>
                  <div>
                    <div class="header">
                      <!-- <img :src="detail.verifyIcon?detail.verifyIcon:'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'" /> -->
                      <img
                        :src="
                          getFlowTime(6,'headImgUrl')
                            ? getFlowTime(6,'headImgUrl')
                            : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
                        "
                      />
                    </div>
                    <!-- <div>{{ detail.verifyName }}</div> -->
                    <div>{{ getFlowTime(6,'userName') }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 已完成不显示底部 -->
        <div
          v-if="detail.taskStatus != 6"
          class="flex-alignc-justifyb right-foot bgfff"
        >
          <div class="flex-alignc">
            <!-- <div class="flex-alignc mr-20 item">
              <a-icon class="mr-20" type="message" />
              评论
            </div> -->
            <!-- <div class="flex-alignc item">
              <a-icon class="mr-20" type="copy" />
              抄送
            </div> -->
          </div>
          <div>
            <template v-if="userInfo.id == detail.handleUser">
              <template v-if="detail.taskStatus == 1">
                <!-- 待接受显示按钮 -->
                <a-button
                  class="mr-20"
                  @click="handleOperateTask('refuseTask', 2)"
                  >拒绝</a-button
                >
                <a-button
                  class="save-btn"
                  type="primary"
                  @click="handleOperateTask('acceptTask', 1)"
                  >接受</a-button
                >
              </template>
              <template v-if="detail.taskStatus == 3">
                <!-- 执行中显示按钮 -->
                <a-button
                  class="save-btn"
                  type="primary"
                  @click="handleOperateTask('executeTask', 3)"
                  >处理完成</a-button
                >
              </template>
            </template>

            <template v-if="userInfo.id == detail.createUser">
              <template v-if="detail.taskStatus == 4">
                <!-- 待验证显示按钮 -->
                <a-button @click="handleOperateTask('refuseVerifyTask', 5)"
                  >拒绝</a-button
                >
                <a-button
                  class="save-btn"
                  type="primary"
                  @click="handleOperateTask('agreeTask', 4)"
                  >同意</a-button
                >
              </template>
              <template v-if="detail.taskStatus == 5">
                <!-- 待评价显示按钮 -->
                <a-button
                  class="save-btn"
                  type="primary"
                  @click="handleOperateTask('evaluateTask', 6)"
                  >评价工单</a-button
                >
              </template>
            </template>
          </div>
        </div>
      </div>
    </a-drawer>
    <!-- 拒绝接受工单/拒绝评价工单弹窗 -->
    <a-modal
      :visible="refuseShow"
      @cancel="closeModal"
      @ok="operateTask"
      title="拒绝工单意见"
    >
      <div class="flex-center">
        <a-textarea
          :auto-size="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入"
          v-model="refuseDesc"
        />
      </div>
    </a-modal>
    <!-- 评价弹窗 -->
    <a-modal
      :visible="evaluateShow"
      @cancel="closeModal"
      @ok="operateTask"
      title="评价工单"
    >
      <div class="flex-center">
        <div class="avatar flex-center">
          <div class="avatar-img">
            <!-- <img :src="detail.createUserIcon" /> -->
            <img
              :src="
                userMsg.headImgUrl
                  ? userMsg.headImgUrl
                  : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
              "
            />
          </div>
          <div>{{ userMsg.name }}</div>
        </div>
        <ul>
          <li class="flex-alignc">
            <div>总体:</div>
            <a-rate v-model="evaluate.overallScore" />
          </li>
          <li class="flex-alignc">
            <div>响应:</div>
            <a-rate v-model="evaluate.responseScore" />
          </li>
          <li class="flex-alignc">
            <div>质量:</div>
            <a-rate v-model="evaluate.qualityScore" />
          </li>
          <li class="flex-alignc">
            <div>效率:</div>
            <a-rate v-model="evaluate.efficiencyScore" />
          </li>
        </ul>
      </div>
    </a-modal>

    <!-- 详情填写工单报告弹窗 -->
    <a-drawer
      :bodyStyle="{
        padding: '0.3rem 0 0 0',
      }"
      :closable="false"
      :destroyOnClose="true"
      :headerStyle="{
        background: '#f0f1f5',
        padding: '0 0.2rem 0 0.3rem',
      }"
      :visible="reportDrawer"
      @close="closeReportDrawer"
      height="100%"
      placement="top"
      wrapClassName="add-power"
    >
      <template #title>
        <div class="head-box">
          <span>工单处理报告</span>
          <div class="head-btn">
            <a-button @click="closeReportDrawer">取消</a-button>
            <a-button
              v-if="!isReport"
              class="save-btn"
              type="primary"
              @click="handleSubmitReport"
              >保存</a-button
            >
          </div>
        </div>
      </template>
      <div class="content-box">
        <div class="flex h100 scroll-y" style="width: 70%; margin: auto">
          <a-form-model class="w100" style="padding-right: 10px;" ref="reportForm" :model="reportForm">
            <a-form-model-item
              v-for="(item, index) in reportForm.reportList"
              :key="index"
              :label="item.name"
              :prop="'reportList.' + index + '.remark'"
              :rules="{
                required: true,
                message: '内容不能为空',
                trigger: 'blur',
              }"
            >
              <a-textarea
                class="report-textarea"
                :disabled="isReport"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                placeholder="请输入"
                v-model="item.remark"
              />
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </a-drawer>

    <!-- 电站选择弹窗 -->
    <StationModal
      ref="StationModal"
      :id.sync="form.stationId"
      :name.sync="form.stationName"
    ></StationModal>
    <!-- 设备选择弹窗 -->
    <DeviceModal
      ref="DeviceModal"
      :stationId="form.stationId"
      :id.sync="form.deviceId"
      :name.sync="form.deviceName"
    >
    </DeviceModal>

    <!-- 报警选择弹窗 -->
    <PoliceModal
      ref="PoliceModal"
      :deviceSn="form.deviceSn"
      :id.sync="form.alarmId"
      :name.sync="form.alarmName"
    >
    </PoliceModal>

    <!-- 成员选择弹窗 -->
    <MemberModal ref="MemberModal" @onSubmit="changeMember"></MemberModal>
  </div>
</template>

<script>
import {
  getTaskList,
  getTaskDetail,
  createTask,
  operateTask,
  getTaskEvaluate,
  taskReport,
  getTaskReport,
} from "@/api/workOrder";
import { getCurrentUser } from "@/api/user.js";
import { getToken } from "@/utils/auth";
import { debound } from "@/utils/index.js";

export default {
  data() {
    return {
      yHeight: 0,
      userInfo: {},
      queryParams: {
        taskStatus: "", // 状态
        timeoutStatus: "", // 超时状态
      },
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          width: 70,
          customRender: (text, record, index) => {
            return index + 1;
          },
          fixed: "left",
        },
        {
          title: "标题",
          dataIndex: "title",
          width: 120,
          scopedSlots: { customRender: "titleSlot" },
        },
        {
          title: "编号",
          width: 120,
          dataIndex: "id",
        },
        {
          title: "状态",
          width: 120,
          dataIndex: "taskStatus",
          scopedSlots: { customRender: "taskStatusSlot" },
        },
        {
          title: "超时状态",
          width: 120,
          dataIndex: "timeoutStatus",
          scopedSlots: { customRender: "timeoutStatusSlot" },
        },
        {
          title: "超时时长",
          width: 120,
          dataIndex: "timeout",
        },
        {
          title: "发起人",
          width: 120,
          dataIndex: "createName",
        },
        {
          title: "发起时间",
          width: 120,
          dataIndex: "createTime",
        },
        {
          title: "处理人",
          width: 120,
          dataIndex: "handleName",
        },
        {
          title: "计划处理时间",
          width: 120,
          dataIndex: "",
          scopedSlots: { customRender: "planHandlerSlot" },
        },
        {
          title: "计划用时(h)",
          width: 120,
          dataIndex: "planDateTime",
        },
        {
          title: "实际处理时间",
          width: 120,
          dataIndex: "",
          scopedSlots: { customRender: "realityHandlerSlot" },
        },
        {
          title: "实际用时(h)",
          width: 120,
          dataIndex: "realityDateTime",
        },
        {
          title: "偏差(%)",
          width: 120,
          dataIndex: "deviation",
        },
      ],
      tableData: [],
      total: 0,

      visible: false, // 添加工单弹窗
      form: {
        templateId: "", // 模板选择的id
        templateName: "", // 模板选择的名称
        title: "", // 标题
        priority: "", // 优先级：1较低，2普通，3紧急，4非常紧急
        planHandlerStartTime: "", // 计划开始处理时间
        planHandlerEndTime: "", // 计划结束处理时间
        stationId: "", // 电站Id
        stationName: "", // 电站名称
        deviceId: "", // 设备Id
        deviceName: "", // 设备名称
        alarmId: "", // 报警Id
        alarmName: "", // 报警名称
        taskDesc: "", // 描述
        handleUser: "", // 处理人Id
        verifyUser: "", // 验证人Id
        evaluateUser: "", // 评价人
        fileEntities: [], // 图片数组
      },
      rules: {
        title: [
          {
            required: true,
            message: "请填写标题",
            trigger: "suiyidingyi",
          },
        ],
        priority: [
          {
            required: true,
            message: "请选择优先级",
            trigger: "suiyidingyi",
          },
        ],
        planHandlerStartTime: [
          {
            required: true,
            message: "请选择计划处理时间",
            trigger: "suiyidingyi",
          },
        ],
        taskDesc: [
          {
            required: true,
            message: "请填写描述",
            trigger: "suiyidingyi",
          },
        ],
      },
      memberList: [
        {
          type: "处理人",
          field: "handleUser",
          id: "",
          name: "",
          headImgUrl: "",
        },
        {
          type: "验证人",
          field: "verifyUser",
          id: "",
          name: "",
          headImgUrl: "",
        },
        {
          type: "评价人",
          field: "evaluateUser",
          id: "",
          name: "",
          headImgUrl: "",
        },
      ],
      memberField: "", // 添加成员字段
      memberIndex: "",

      detail: {},
      detailDrawer: false, // 详情弹窗
      operateType: "", // 详情操作类型接口字段
      flowStatus: "", // 详情操作类型状态 1 接受工单 2 拒绝工单 3 执行完成 4 验证人同意 5 验证人拒绝 6 评价工单
      refuseShow: false, // 待接受拒绝工单弹窗/待验证拒绝工单弹窗
      refuseDesc: "",

      evaluateShow: false, // 详情评价工单弹窗
      evaluate: {
        // taskId: 工单Id,
        overallScore: null, // 总体评分
        responseScore: null, // 响应评分
        qualityScore: null, // 质量评分
        efficiencyScore: null, // 效率评分
      },

      reportDrawer: false, // 详情填写工单报告弹窗
      isReport: false, // 是否填写了报告
      reportForm: {
        reportList: [
          {
            componentType: 1,
            name: "光伏组件(必填)",
            remark: "测试备注",
          },
          {
            componentType: 2,
            name: "逆变器(必填)",
            remark: "测试备注",
          },
          {
            componentType: 3,
            name: "监控器(必填)",
            remark: "测试备注",
          },
          {
            componentType: 4,
            name: "优化器(必填)",
            remark: "测试备注",
          },
          {
            componentType: 5,
            name: "无人机(必填)",
            remark: "测试备注",
          },
          {
            componentType: 6,
            name: "热成像(必填)",
            remark: "测试备注",
          },
          {
            componentType: 7,
            name: "机器人(必填)",
            remark: "测试备注",
          },
          {
            componentType: 8,
            name: "旋转支架(必填)",
            remark: "测试备注",
          },
          {
            componentType: 9,
            name: "配电线路(必填)",
            remark: "测试备注",
          },
          {
            componentType: 10,
            name: "建筑物与光伏系统结合部分(必填)",
            remark: "测试备注",
          },
        ],
      },
      userMsg: {}
    };
  },
  computed: {
    timeArr: {
      get() {
        return this.form.planHandlerStartTime
          ? [this.form.planHandlerStartTime, this.form.planHandlerEndTime]
          : [];
      },
      set(val) {
        this.form.planHandlerStartTime = val[0];
        this.form.planHandlerEndTime = val[1];
      },
    },
  },
  created() {
    this.userInfo = this.$store.state.User.uerInfo;
    if (this.$route.query.status) {
      this.queryParams.taskStatus = this.$route.query.status;
    }
    this.getTableList();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.screenResize);
  },
  mounted() {
    if (this.$route.path == "/station/workOrder") {
      this.$nextTick(() => {
        document.getElementsByClassName("set-padding")[0].style.paddingLeft =
          "16px";
        document.getElementsByClassName("set-padding")[0].style.paddingRight =
          "16px";
        document.getElementsByClassName("set-padding")[0].style.paddingBottom =
          "10px";
      });
    }
    if (this.$route.query.nav) {
      this.$refs.TemplateModal.openModal();
    }
    this.watchResize();
    this.getUserMsg();
  },
  methods: {
    watchResize() {
      this.yHeight = this.$refs["yHeight"].offsetHeight - 80;
      window.addEventListener("resize", this.screenResize);
    },
    screenResize: debound(function () {
      this.yHeight = this.$refs["yHeight"].offsetHeight - 80;
    }, 200),
    onSearch() {
      this.getTableList();
    },
    getUserMsg() {
      getCurrentUser().then((res) => {
        this.userMsg = res.data;
      });
    },
    // 获取表格数据
    getTableList(pageMsg) {
      let requestPage = {
        page: 1,
        limit: 50,
        stationId: this.$route.query.id,
      };
      if (pageMsg?.page) {
        requestPage.page = pageMsg.page;
        requestPage.limit = pageMsg.pageSize;
      }
      requestPage.stationId || delete requestPage.stationId;
      getTaskList({ ...this.queryParams, ...requestPage }).then((res) => {
        this.tableData = res.data;
        this.total = res.count;
      });
    },

    // 模板选择回调 打开添加工单弹窗
    templateSubmit(e) {
      this.visible = true;
    },
    // 添加工单弹窗关闭
    closeTopDrawer() {
      this.visible = false;
      this.form = {
        id: "",
        templateId: "", // 模板选择的id
        title: "", // 标题
        priority: "", // 优先级：1较低，2普通，3紧急，4非常紧急
        planHandlerStartTime: "", // 计划开始处理时间
        planHandlerEndTime: "", // 计划结束处理时间
        stationId: "", // 电站Id
        stationName: "", // 电站名称
        deviceId: "", // 设备Id
        deviceName: "", // 设备名称
        alarmId: "", // 报警Id
        alarmName: "", // 报警名称
        taskDesc: "", // 描述
        handleUser: "", // 处理人Id
        verifyUser: "", // 验证人Id
        evaluateUser: "", // 评价人
        fileEntities: [], // 图片数组
      };
    },
    // 打开电站/设备/报警弹窗
    handleOpenModal(modalName) {
      if (modalName == "DeviceModal" && !this.form.stationId) {
        return this.$message.error({ content: "请选择电站!" });
      }
      if (modalName == "PoliceModal" && !this.form.deviceId) {
        return this.$message.error({ content: "请选择设备!" });
      }
      this.$refs[modalName].openModal();
    },
    // 电站/设备/报警删除
    handleTagClose(type) {
      // 1 电站 2 设备 3 报警
      if (type == 1) {
        this.form.stationId = "";
        this.form.stationName = "";
        this.form.deviceId = "";
        this.form.deviceName = "";
        this.form.alarmId = "";
        this.form.alarmName = "";
      } else if (type == 2) {
        this.form.deviceId = "";
        this.form.deviceName = "";
        this.form.alarmId = "";
        this.form.alarmName = "";
      } else {
        this.form.alarmId = "";
        this.form.alarmName = "";
      }
    },
    // 打开选择成员弹窗
    handleOpenMemberModal(index, item) {
      this.memberIndex = index;
      this.memberField = item.field;
      this.$refs.MemberModal.openModal();
    },
    // 删除成员
    handleDelMember(index, item) {
      this.memberList[index].id = "";
      this.memberList[index].name = "";
      this.memberList[index].headImgUrl = "";
      this.form[item.field] = "";
    },
    // 选择成员回调
    changeMember(e) {
      let { id, name, headImgUrl } = e;
      this.memberList[this.memberIndex].id = id;
      this.memberList[this.memberIndex].name = name;
      this.memberList[this.memberIndex].headImgUrl = headImgUrl;
      this.form[this.memberField] = id;
    },
    uploadCheck(file, fileList) {
      const imgType = ["image/gif", "image/jpeg", "image/pjpeg", "image/png"];
      if (imgType.includes(file.type)) {
        return true;
      } else {
        this.$message.warning("请上传jpeg、png、gif类型的图片");
        return false;
      }
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        return;
      }
      if (info.file.status === "removed") {
        let index = this.form.fileEntities.findIndex((item) => {
          return item.uid == info.file.uid;
        });
        if (index != -1) {
          this.form.fileEntities.splice(index, 1);
        }
      }
    },
    ownUpload(options) {
      const formdata = {
        multipartFiles: options.file,
      };
      upLoadFile(formdata).then((res) => {
        res.data.forEach((item, index) => {
          item.name = item.fileUrl;
          item.uid = "-" + index;
          item.url = item.fileUrl;
          item.status = "done";
        });
        this.form.fileEntities = res.data;
      });
    },
    uploadCheck(file, fileList) {
      const imgType = ["image/gif", "image/jpeg", "image/pjpeg", "image/png"];
      if (imgType.includes(file.type)) {
        return true;
      } else {
        this.$message.warning("请上传jpeg、png、gif类型的图片");
        return false;
      }
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        return;
      }
      if (info.file.status === "removed") {
        let index = this.form.fileEntities.findIndex((item) => {
          return item.uid == info.file.uid;
        });
        if (index != -1) {
          this.form.fileEntities.splice(index, 1);
        }
      }
    },
    ownUpload(options) {
      const formdata = {
        multipartFiles: options.file,
      };
      upLoadFile(formdata).then((res) => {
        res.data.forEach((item, index) => {
          item.name = item.fileUrl;
          item.uid = "-" + index;
          item.url = item.fileUrl;
          item.status = "done";
        });
        this.form.fileEntities = res.data;
      });
    },
    // 添加工单
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          createTask(
            this.form.id ? "updateSingle" : "saveSingle",
            this.form
          ).then((res) => {
            this.getTableList();
            this.closeTopDrawer();
          });
        }
      });
    },

    // 查看详情
    toDetail(item) {
      this.getDetail(item.id);
      this.detailDrawer = true;
    },
    closeDetailDrawer() {
      this.detailDrawer = false;
    },
    // 操作工单
    handleOperateTask(type, status) {
      this.operateType = type;
      this.flowStatus = status;
      if (
        this.operateType == "refuseTask" ||
        this.operateType == "refuseVerifyTask"
      ) {
        // 拒绝工单/验证拒绝
        this.refuseShow = true;
        return;
      }
      if (this.operateType == "evaluateTask") {
        // 评价
        this.evaluateShow = true;
        return;
      }
      this.operateTask();
    },
    operateTask() {
      let params = {};
      if (
        this.operateType == "refuseTask" ||
        this.operateType == "refuseVerifyTask"
      ) {
        params.refuseDesc = this.refuseDesc;
      } else if (this.operateType == "evaluateTask") {
        params = this.evaluate;
      }
      // else if(this.operateType=='acceptTask'||this.operateType=='executeTask'||this.operateType=='agreeTask') {

      // }
      params.id = this.detail.id;
      params.flowStatus = this.flowStatus;

      operateTask(this.operateType, params).then((res) => {
        this.getDetail(this.detail.id);
        this.refuseShow = false;
        this.evaluateShow = false;
      });
    },
    // 获取工单详情
    getDetail(id) {
      getTaskDetail({ id }).then((res) => {
        this.detail = res.data;
        this.getTaskEvaluate(id); // 获取工单详情评价
        this.getTaskReport(id); // 获取工单详情报告
      });
    },
    // 处理获取流程操作时间
    getFlowTime(status,field) {
      if (this.detail.taskFlowEntities) {
        let index = this.detail.taskFlowEntities.findIndex((item) => {
          if(item) {
            item.flowStatus == status;
          }
        });
        if (index != -1) {
          return this.detail.taskFlowEntities[index][field];
        }else{
          return ''
        }
      }else {
        return ''
      }
    },
    // 处理获取流程操作状态
    getFlowStatus(status) {
      if (this.detail.taskFlowEntities) {
        let someStatus = this.detail.taskFlowEntities.some(item => { 
          if(item) {
            return item.flowStatus == status
          }
         })
        return someStatus
      }else {
        return false
      }
    },
    // 获取工单详情评价
    getTaskEvaluate(id) {
      getTaskEvaluate({
        taskId: id,
      }).then((res) => {
        if (res.data) {
          this.evaluate = res.data;
        }
      });
    },
    // 获取工单详情报告
    getTaskReport(id) {
      getTaskReport({
        taskId: id,
      }).then((res) => {
        this.isReport = res.data.length ? true : false;
        if (this.isReport) {
          this.reportForm.reportList = res.data;
        }
      });
    },
    // 拒绝/评价弹窗关闭回调
    closeModal() {
      this.refuseShow = false;
      this.evaluateShow = false;
    },

    // 详情填写工单报告弹窗
    openWorkDrawer() {
      this.reportDrawer = true;
    },
    closeReportDrawer() {
      this.reportDrawer = false;
    },
    // 提交工单报告
    handleSubmitReport() {
      this.$refs.reportForm.validate((valid) => {
        if (valid) {
          this.reportForm.reportList.forEach((item) => {
            item.taskId = this.detail.id;
            item.token = getToken();
          });
          taskReport({
            taskReportEntities: this.reportForm.reportList,
          }).then((res) => {
            this.getDetail(this.detail.id);
            this.closeReportDrawer();
          });
        }
      });
    },

    // 详情查看工单报告弹窗
    openWorkLookDrawer() {
      this.workLookDrawer = true;
    },
  },
};
</script>

<style lang="less" scoped>
.max-box {
  padding-top: 16px;
  padding-right: 20px;
}
.add-power {
  .head-box {
    width: 100%;
    height: 64px;
    font-size: 20px;
    color: #252b3a;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .head-btn {
      /deep/.ant-btn {
        font-size: 12px;
      }

      .save-btn {
        margin-left: 8px;
      }
    }
  }

  /deep/.ant-drawer-body {
    height: calc(100vh - 100px);
  }

  .content-box {
    width: 100%;
    height: 100%;
    padding-top: 24px;
    .report-textarea {
      resize: none;
      background-color: transparent !important;
    }
    .left {
      padding-right: 10px;

      /deep/.ant-form label {
        font-size: 12px;
        color: #00000073;
      }

      /deep/.ant-form-item-label {
        line-height: initial !important;
      }

      /deep/.ant-form-item {
        margin-bottom: 12px;
      }

      .tagBox-wrap {
        position: relative;
        border: 1px solid #d9d9d9;
        line-height: initial;
        margin-top: 10px;
        border-radius: 10px;
        padding: 10px;
      }
    }

    .flow {
      padding-left: 10px;
      border-left: 1px solid rgba(0, 0, 0, 0.08);

      li {
        position: relative;
        padding: 0 40px 60px 40px;
        .flow-status-icon {
          position: absolute;
          top: -5px;
          left: -2px;
          .green {
            color: #41D068;
          }
          .warn {
            color: #f8b51e;
          }
          .error {
            color: #FF7875;
          }
        }
        &:before {
          position: absolute;
          display: block;
          content: "";
          top: 3px;
          left: 3px;
          width: 10px;
          height: 10px;
          // background-color: hsla(0, 0%, 50.2%, 0.6);
          border-radius: 50%;
        }

        &:after {
          position: absolute;
          display: block;
          content: "";
          top: 8px;
          bottom: -3px;
          left: 7px;
          width: 1px;
          background-color: rgba(0, 0, 0, 0.08);
          border-radius: 1px;
        }

        &:last-child {
          &:after {
            display: none;
          }
        }
        .add-member {
          position: absolute;
          top: 0;
          right: 0;
        }
        .tip {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.45);
        }
        .flow-title {
          line-height: 1;
        }
        .header {
          position: relative;
          margin-bottom: 10px;

          img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }

          .close {
            position: absolute;
            top: -20%;
            right: -20%;
          }
        }
      }
    }
  }
}
.work-list {
  li {
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}

.avatar {
  .avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
</style>